<template>
  <div class="title1">hello app</div>
  <div class="title2">hello app</div>
  <div class="title3">hello app</div>
</template>

<script setup></script>

// lang="sass"语法：必须省略括号和分号
<style lang="sass">
// .title
//   color: red
</style>
// lang="scss"语法：不用省略任何
<style lang="scss" scoped>
.title1 {
  font-size: 25px;
  // color: $primary-color-1;
  color: var(--guigu-primary-color-1);
}
.title2 {
  font-size: 25px;
  // color: $primary-color-2;
  color: var(--guigu-primary-color-2);
  span {
    color: aquamarine;
  }
}
.title3 {
  font-size: 25px;
  // color: $primary-color-3;
  color: var(--guigu-primary-color-3);
}

// 嵌套写问题：1. 生成css体积大，加载速度慢 2. 选择器过多，解析速度慢
// .a {
//   .b {
//     .c{
//       font-size: 20px;
//     }
//   }
// }

.c {
  font-size: 20px;
}
</style>
